<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--基本选择器
     id
     class
     标签
     通配 *
-->
<!--组合选择器
   后代选择器 div span
   子选择器 >  eg: div>span
   相邻选择器  +  eg:div+span
   兄弟选择器  ~  eg:div~span
   并集选择器  div,span
   交集选择器  div.content
-->
<!--属性选择器
   [属性名]
   [属性名=属性值]
   [属性名^=属性值] 以xx开头
   [属性名$=属性值]
   [属性名*=属性值] 值 值-
-->
<!--伪类选择器
      动态伪类 love hate
         :link
         :visited 激活后
         :hover{}鼠标悬停
         :active{}被激活
      结构伪类
         :first-child
         :last-child
         :nth-child(odd奇数/even偶数/表达式 1 2 5 xn+y)
      否定伪类
         :not([type=text])
      状态伪类
         :disabled
         :checked
       目标伪类
          :target
-->
<!--伪元素选择器
       ::before
       ::after
-->
<!--css特性
    层叠性
    继承性
        font-
        color
        text-
        opacity
    优先级
      权重
        style 1000
        id    100
        class 10
        元素   1
        权重一致，就近原则
-->
</body>
</html>